@import '../../../index.scss';

.container {

  .navbar {

    // background-color: red;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;

    .capsule {
      // background-color: orange;
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;

      .back {
        position: absolute;
        height: 40rpx;
        left: 20rpx;
        padding: 10rpx;
        // background-color: rgba($color: #000000, $alpha: .1);
        width: 40rpx;
        border-radius: 100%;
        filter: invert(100%);
      }

      .title {
        font-size: 34rpx;
        font-weight: bold;
        color: #fff;
        text-align: center;
        width: 100%;
      }
    }
  }

  .userinfo {

    position: relative;
    // height: 300rpx;
    padding-bottom: 80rpx;

    .bg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;

      &::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        background: linear-gradient(to top, rgba(#000, .6), rgba(#000, .45), rgba(#000, .3), rgba(#000, .1));
      }
    }

    .info {
      padding: 0 30rpx;
      display: flex;
      align-items: center;

      .avatar {
        width: 140rpx;
        height: 140rpx;
        border-radius: 100%;
        overflow: hidden;
        margin-right: 30rpx;
        background-color: #fff;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .right {

        .nikename {
          display: flex;
          align-items: center;
          padding-bottom: 14rpx;

          .name {
            font-size: 32rpx;
            font-weight: bold;
            color: #fff;
            line-height: 1;
          }

          .lv {
            height: 28rpx;
            margin-left: 10rpx;
          }
        }

        .id {
          font-size: 20rpx;
          color: #fff;
          opacity: .9;
        }

        .address {
          font-size: 20rpx;
          color: #fff;
          opacity: .9;
        }
      }

    }

    .desc {
      padding: 20rpx 30rpx;
      font-size: 28rpx;
      color: #fff;
    }

    .auth {
      display: flex;
      align-items: center;
      margin-top: 30rpx;
      color: $primary-color;
      font-weight: bold;
      font-size: 28rpx;
      line-height: 1;
      // padding-bottom: 4rpx;
      padding-left: 30rpx;

      .icon {
        height: 32rpx;
        margin-right: 6rpx;
      }
    }

    .tags {
      padding: 0 30rpx;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: -10rpx;



      .tag {
        color: #fff;
        font-size: 20rpx;
        margin-right: 20rpx;
        background-color: #aaa;
        padding: 4rpx 14rpx;
        border-radius: 100px;
        margin-bottom: 10rpx;
      }
    }

    .collet {
      display: flex;
      justify-content: space-between;
      padding: 0 30rpx;
      padding-top: 30rpx;

      .left {
        display: flex;

        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-right: 40rpx;

          .num {
            font-size: 28rpx;
            font-weight: bold;
            color: #fff;
          }

          .name {
            color: #fff;
            // margin-top: 10rpx;
            font-size: 20rpx;
            opacity: .9;
          }
        }

      }

      .right {
        display: flex;
        align-items: center;

        .btn {
          padding: 0 50rpx;
          background-color: red;
          color: #fff;
          margin-left: 20rpx;
          border-radius: 100px;
          font-size: 24rpx;
          height: 54rpx;
          line-height: 54rpx;

          &.like {
            background-color: $primary-color;
            transform: all .4s;

            &.active {
              background-color: #f8f8f8;
              color: #999;
              opacity: .5;
              // color: tr;
            }
          }

          &.message {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 30rpx;
            height: 54rpx;
            background-color: rgba(#fff, .1);
            border: 1px solid #fff;
            box-sizing: border-box;

            image {

              height: 32rpx;
            }
          }
        }
      }
    }
  }

  .matter {
    background-color: #fff;
    margin-top: -40rpx;
    border-radius: 30rpx;
    padding: 30rpx;
    box-sizing: border-box;

    .nav {
      display: flex;

      .item {
        font-size: 28rpx;
        margin-right: 30rpx;
        color: #999;

        &.active {
          color: #000;
          font-weight: bold;

          .split {
            background-color: $primary-color;
          }
        }

        .split {
          width: 30rpx;
          height: 6rpx;
          margin: 0 auto;
          border-radius: 100px;
          margin-top: 4rpx;
        }
      }
    }

    .information {
      display: flex;
      flex-direction: column;
      display: none;

      &.flex {
        display: flex;
      }


      .message {
        display: flex;
        padding: 30rpx 0 30rpx;

        .cont {
          display: flex;
          align-items: center;
          margin-right: 40rpx;

          .name {
            font-size: 20rpx;
            color: #999;
            padding-right: 10rpx;
          }

          .num {
            color: #000;
            font-size: 28rpx;
            font-weight: bold;
          }
        }
      }

      .tips {
        .tip {
          font-size: 26rpx;
          color: #000;
          display: flex;
          align-items: center;
          margin-bottom: 10rpx;
          color: #333;

          .time {
            font-size: 20rpx;
            padding-left: 10rpx;
            color: #999;
          }
        }


      }

      .medal {
        padding-top: 30rpx;
        margin-right: -30rpx;

        .title {
          font-size: 32rpx;
          display: flex;
          align-items: center;
          font-weight: bold;
          padding-bottom: 20rpx;

          .split {
            width: 6rpx;
            height: 28rpx;
            margin-right: 10rpx;
            background-color: $primary-color;
            border-radius: 100px;
          }

        }

        .scroll-view {
          // background-color: red;
          width: 100%;

          .contot {
            white-space: nowrap;

            // width: 100%;
            // background-color: red;
            .item {
              width: 150rpx;
              display: inline-block;
              margin-right: 20rpx;

              .cover {
                width: 150rpx;
                height: 150rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #F4F6FD;
                border-radius: 16rpx;

                image {
                  width: 64%;
                  height: 64%;
                }
              }

              .name {
                font-size: 24rpx;
                // font-weight: bold;
                color: #333;
                padding-top: 10rpx;
                text-align: center;
              }
            }
          }
        }
      }
    }


    .box {
      display: none;
      padding-top: 20px;

      &.block {
        display: block;
      }

      .item {

        padding: 30rpx 0;
        border-bottom: 1px solid #eee;

        &:first-child {
          padding-top: 0;
        }

        &:last-child {
          border: none;
        }

        .info {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .left {
            display: flex;

            .avater {
              width: 80rpx;
              height: 80rpx;
              border-radius: 100%;
              overflow: hidden;
              margin-right: 20rpx;

              image {
                width: 100%;
                height: 100%;
              }
            }

            .user {
              display: flex;
              flex-direction: column;
              justify-content: space-around;

              .name {
                display: flex;
                align-items: center;
                font-size: 28rpx;
                font-weight: bold;

                .lv {
                  height: 30rpx;
                  margin-left: 10rpx;
                }
              }

              .time {
                font-size: 20rpx;
                color: #999;
              }
            }
          }

          .right {
            .more {
              height: 36rpx;
              opacity: .2;
            }
          }
        }



        .imageText {
          .topic {
            display: flex;
            flex-wrap: wrap;
            padding-top: 20rpx;
            margin-bottom: -10rpx;

            .tip {
              font-size: 24rpx;
              margin-right: 14rpx;
              padding: 14rpx 16rpx;
              background-color: #ececec;
              border-radius: 10rpx;
              display: flex;
              color: #555;
              align-items: center;
              line-height: 0;
              margin-bottom: 10rpx;

              .icon {
                height: 20rpx;
                margin-right: 6rpx;
              }
            }
          }

          .content {
            padding: 20rpx 0;
            padding-bottom: 0;

            .desc {
              font-size: 28rpx;
              color: #000;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 4;
              /* 设置为3行 */
              overflow: hidden;
            }

            .photoAlbum {
              // display: flex;
              // flex-wrap: wrap;
              // justify-content: space-between;
              // margin-top: 20rpx;
              padding: 20rpx 0;
              display: grid;
              grid-template-columns: 1fr 1fr 1fr;
              gap: 14rpx;

              .photo {
                // flex-basis: calc(33.33% - 10rpx);
                width: 100%;
                padding-bottom: 100%;
                position: relative;
                background-color: #fff;
                border-radius: 14rpx;
                overflow: hidden;


                image {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  top: 0;
                  left: 0;
                }

                .more {
                  position: absolute;
                  right: 0;
                  bottom: 0;
                  width: 54rpx;
                  height: 54rpx;
                  background-color: #000;
                  font-size: 26rpx;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  color: #fff;
                  border-radius: 20rpx 0 0;
                  opacity: .6;
                  // font-weight: bold;
                }
              }
            }
          }
        }

        .topic {
          display: flex;
          flex-wrap: wrap;
          padding-top: 20rpx;
          margin-bottom: -10rpx;

          .tip {
            font-size: 24rpx;
            margin-right: 14rpx;
            padding: 14rpx 16rpx;
            background-color: #ececec;
            border-radius: 10rpx;
            display: flex;
            color: #555;
            align-items: center;
            line-height: 0;
            margin-bottom: 10rpx;

            .icon {
              height: 20rpx;
              margin-right: 6rpx;
            }
          }
        }

        .video {


          .player {
            margin: 20rpx 0;
            box-sizing: border-box;
            height: 400rpx;
            background-color: #eee;
            border-radius: 14rpx;
            overflow: hidden;

            position: relative;

            video {
              width: 100%;
              height: 100%;
            }

            .cover {
              width: 100%;
              height: 100%;

              &::before {
                content: "";
                width: 100%;
                height: 100%;
                background-color: #fff;
                position: absolute;
                opacity: .1;
              }
            }


            .icon {
              width: 100rpx;
              height: 100rpx;
              position: absolute;
              z-index: 11;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              opacity: .4;
            }
          }

          .desc {
            font-size: 28rpx;
            color: #000;
            line-height: 1.6em;
            margin-bottom: 10rpx;
          }
        }

        .problemAnswer {
          .problem {
            margin-top: 20rpx;
            padding: 20rpx;
            box-sizing: border-box;
            background-color: #eee;
            border-radius: 14rpx;
            background-color: #ffe3e3;

            .tit {
              font-size: 20rpx;
              padding: 6rpx 16rpx;
              background-color: #ff8787;
              font-weight: bold;
              color: #fff;
              display: inline-block;
              border-radius: 10rpx;
              margin-bottom: 10rpx;
            }

            .desc {
              font-size: 28rpx;
              color: #444;
            }
          }

          .answer {
            margin-top: 20rpx;
            margin-bottom: 20rpx;
            padding: 20rpx;
            box-sizing: border-box;
            background-color: rgba($color: $primary-color, $alpha: 0.2);
            border-radius: 14rpx;

            .tit {
              font-size: 20rpx;
              padding: 6rpx 16rpx;
              background-color: #20c997;
              font-weight: bold;
              color: #fff;
              display: inline-block;
              border-radius: 10rpx;
              margin-bottom: 10rpx;
            }

            .desc {
              font-size: 28rpx;
              color: #444;
            }
          }
        }


        .botton {
          display: flex;
          justify-content: space-between;

          .address {
            display: flex;
            background-color: #eee;
            padding: 10rpx 10rpx;
            align-items: center;
            border-radius: 8rpx;

            .icon {
              width: 22rpx;
              height: 22rpx;
              margin-right: 6rpx;
            }

            .name {
              line-height: 0;
              font-size: 20rpx;
            }
          }

          .right {
            flex: 1;
            display: flex;
            justify-content: flex-end;

            .clas {
              display: flex;
              align-items: center;
              margin-left: 30rpx;

              .icon {
                width: 32rpx;
                height: 32rpx;
                opacity: .7;
              }

              .num {
                color: #777;
                margin-left: 10rpx;
                font-size: 24rpx;
              }
            }
          }
        }
      }

      .noData {
        text-align: center;
        // position: fixed;
        margin-top: 120rpx;
        width: 100%;

        image {
          width: 28%;
        }

        .tip {

          color: #888;
          font-size: 26rpx;
          margin-top: 20rpx;
        }
      }
    }
  }
}

.more-list {
  padding: 30rpx;
  box-sizing: border-box;

  .title {
    text-align: center;
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    padding: 10rpx 20rpx;
    padding-bottom: 30rpx;
  }

  .box {
    // justify-content: sp;
    display: flex;

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      // flex-basis: 25%;
      margin-right: 30rpx;

      .icon {
        width: 40rpx;
        height: 40rpx;
        background-color: #ddd;
        padding: 30rpx;

        border-radius: 100%;

        image {
          width: 100%;
          height: 100%;
        }

      }

      .txt {
        font-size: 26rpx;
        font-weight: bold;
        padding-top: 10px;
        color: #333;
      }
    }
  }

}